html,body{
    width: 100%;
    height:100%;
    #main{
        position: relative;
        width: 100%;
        min-height:100vh;
        background: #fff;
        overflow: auto;
        .rule{
            position: absolute;
            right: 0;
            top: 6.7rem;
            width: 2.42rem;
            height: 0.98rem;
            z-index: 5;
            img{
                width: 100%;
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                display: block;
            }
        }
        .logBox{
            position: absolute;
            right: 0;
            top: 5.6rem;
            width: 2.42rem;
            height: 0.98rem;
            z-index: 5;
            img{
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
        .topBg{
            position: absolute;
            width: 100%;
            height: 19.2rem;
            background: url("../images2/topBg.png") no-repeat;
            background-size: 100% 100%;
        }
        .banner{
            position: absolute;
            top: 4.1rem;
            left: 0;
            width: 100%;
            height: 8.76rem;
            z-index: 1;
            img{
                width: 100%;
                height: 100%;
                display: block;
            }
        }
        .detailBlock{
            position: relative;
            width: 10.22rem;
            background: #fff;
            margin: 7.76rem auto 0;
            // border:0.03rem solid rgba(27,27,27,1);
            box-shadow:0px 14px 29px 0px rgba(231,231,231,1);
            z-index: 2;
            box-sizing: border-box;
            padding: 0 0 0.48rem;
            overflow: hidden;
            border-radius: 0.2rem 0.2rem 0 0;
            .topBtn{
                 position: relative;
                // left: 50%;
                // transform: translateX(-50%);
                // top: -1rem;
                width: 100%;
                height: 1.44rem;
                display: flex;
                .btn{
                    font-size: 0.43rem;
                    text-align: center;
                    color: #333;
                    background: #D5E8FF;
                    width: 50%;
                    height: 1.44rem;
                    line-height: 1.44rem;
                }
                .leftBtn{
                    background-size: 100% 100%;
    
             
                }
                .on{
                    background: #fff;
                    font-size: 0.5rem !important;
                    font-weight: bold;
                }
 
                .rightBtn{
                
                    font-size: 0.43rem;
                    bottom: 0;
                    font-size: 0.43rem;
                }
            }
            .title{
                display: inline-block;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                font-size: 0.43rem;
                color: #333333;
                font-family:Source Han Sans CN;
                &:before,&:after{
                    content:'';
                    width: 0.39rem;
                    height: 0.36rem;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                   
                }
                &:before{
                    left: -0.8rem;
                    background: url("../images2/titleBg.png") no-repeat;
                    background-size: 100% 100%;
                }
                &:after{
                    right: -0.8rem;
                    background: url("../images2/titleBg2.png") no-repeat;
                    background-size: 100% 100%;
                }
            }
            .detailBoxOne{
                width: 100%;
                margin-top: 0.72rem;
                .phoneBox{
                    position: relative;
                    margin: 0.43rem auto 0.4rem;
                    width: 8.93rem;
                    height: 1.15rem;
                    input{
                        width: 100%;
                        height: 100%;
                        border: 0.03rem solid #24508E;
                        background: #fff;
                        box-sizing: border-box;
                        padding: 0.37rem 1.45rem 0.37rem 0.45rem;
                        font-size: 0.4rem;
                    }
                    label{
                        position: absolute;
                        right: 0.32rem;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 0.49rem;
                        height: 0.56rem;
                        background: url("../images2/phoneIcon.png") no-repeat;
                        background-size: 100% 100%;
                    }
                }
                .redPackBox{
                    display: flex;
                    flex-wrap: wrap;
                    width: 9.44rem;
                    margin: 0 auto ;
                    justify-content: space-around;
                    .redPackItem{
                        box-sizing: border-box;
                        margin-bottom: 0.4rem;
                        padding: 0.46rem 0 0.4rem;
                        width: 2.59rem;
                        height: 2.59rem;
                        background: url("../images2/redPacket.png") no-repeat;
                        background-size: 100% 100%;
                        display: flex;
                        flex-flow: column;
                        justify-content: space-between;
                        text-align: center;
                        .money{
                            color:#0187F2;
                            font-size: 0.52rem;
                            font-weight: bold;
                        }
                        .msg{
                            color: #FFFFFF;
                            font-size: 0.46rem;
                          
                        }
                    }
                    .redPackItem.on{
                        background: url("../images2/redPacketOn.png") no-repeat;
                        background-size: 100% 100%;
                        .money{
                            color:#F48A07;
                            font-size: 0.52rem;
                            font-weight: bold;
                        }
                        .msg{
                            color: #FFFFFF;
                            font-size: 0.46rem;
                          
                        }
                    }
                }
                .adBanner{
                    position: relative;
                    display: none;
                    width: 9.44rem;
                    height: 3.74rem;
                    margin: auto;
                   background: url("../images2/adBanner.png") no-repeat;
                   background-size: 100% 100%;
                    .adBg{
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        right: 0;
                        z-index: 3;
                        width: 0.63rem;
                        height: 1.93rem;
                        background: url("../images2/adBg.png") no-repeat;
                        background-size: 100% 100%;

                    }
                }
            }
            .detailBoxtwo{
                margin-top: 0.45rem;
                .detailContent{
                    width: 9.65rem;
                    height: 5.76rem;
                    margin: 0.42rem auto 0;
                    background:#D9F2FF;
                    display: flex;
                    .leftNav{
                        box-sizing: border-box;
                        
                        width: 2.3rem;
                        height: 100%;  
                        display: flex;
                        flex-flow: column;
                        align-items: center;
                        justify-content: space-between;
                        background:#D9F2FF;
                        .leftBtn{
                            width: 100%;
                            height: 1/6*100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 0.322rem;
                           
                            text-align: center;
                            background-size: 100% 100%;
                            color: #0966F0;
                        }
                        .leftBtn + .leftBtn{
                            border-top: 0.01rem solid #16C0FF;
                        }
                        .leftBtn.active{
                            background: url("../images2/leftBavBtnOn.png") no-repeat;
                            background-size: 100% 100%;
                            color: #fff;
                        }
                    }
                    .rightCon{
                        width: 7.35rem;
                        height: 100%;
                        .msgBox{
                            position: relative;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                            width: 6.77rem;
                            height: 5.04rem;
                            background: url("../images2/textBg.png") no-repeat;
                            background-size: 100% 100%;
                            box-sizing: border-box;
                            padding: 0.76rem 0.5rem;
                            color: #3570FF;
                            font-size: 0.38rem;
                            text-align: justify;
                        }
                    }
                }
            }
        }
        .bannerB{
            position: relative;
            width:10.22rem;
            height: 2.87rem;
            margin: 0.29rem auto 2rem;
            img{
                width: 100%;
                height: 100%;
                display: block;
            }
            a{
                display: block;
                width: 100%;
                height: 100%;
            }
            .watch{
                position: absolute;
                top: 1.08rem;
                right: 0.43rem;
                width:2.3rem;
                height:0.72rem;
                background:linear-gradient(0deg,rgba(255,204,65,1),rgba(254,252,113,1));
                box-shadow:0px 6px 12px 0px rgba(210,29,0,0.3);
                border-radius:0.36rem;
                color:#D48B0B;
                text-align: center;
                line-height:0.72rem;
                font-size: 0.36rem;
            }
        }
        .submit{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1.73rem;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9;
            .submitBtn{
                width: 10.22rem;
                height: 1.30rem;
                line-height: 1.30rem;
                text-align: center;
                background: url("../images2/btnBg.png") no-repeat;
                background-size: 100% 100%;
                color: #fff;
                font-size: 0.5rem;
                border-radius: 0.3rem;
                font-weight: bold;
            }
        }
    }
}

.animation {
    animation: animToast 0.5s;
}

@keyframes animToast {
    0% {
        transform: skewY(0deg);
    }

    50% {
        transform: skewY(-15deg);
    }

    100% {
        transform: skewY(0deg);
    }
}
.toast {
    position: fixed;
    top: 38%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 0.2rem;
    color: #fff;
    border-radius: 0.2rem;
    opacity: 0;
    z-index: -99;
    font-size: 0.5rem;
}

.ani_code {
    animation: animToast2 2s;
}

@keyframes animToast2 {
    from {
        top: 30%;
        opacity: 0;
        z-index: 999;
    }

    to {
        top: 38%;
        opacity: 1;
        z-index: 999;
    }
}
  